<template>
	<view class="pt30 bef7 f30 h100vh pb140">
		<view class="bf p3 mt30">
			<view class="wei pb30 b-b">参赛人信息</view>
			<view v-if="pageType=='球员'">
				<view class="flex b-b pb30 mt20">
					<view class="c6 mt10">紧急联系人</view>
					<!-- <view class="ml50 flex1 f-s-c">
						<u-radio-group v-model="manInfo.emergencyStr" placement="row">
							<u-radio label="妈妈" name="妈妈"></u-radio>
							<u-radio label="爸爸" name="爸爸" style="margin: 0 20rpx;"></u-radio>
							<u-radio label="其他" name="其他"></u-radio>
						</u-radio-group>
					</view> -->
					<view class="ml60 f-s-c flex1 mt10" @click="showContact=!showContact">
						<text>{{contactName || '请选择'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex mt20 pb10 b-b">
					<view class="c6 mt10">电话号码</view>
					<view class="ml50 flex1 f-s-c">
						<u--input v-model="manInfo.emergencyPhone" placeholder="请输入(必填)" />
					</view>
				</view>
				<view class="f24 c9 mt10">
					此电话号码供紧急联系时使用
				</view>
			</view>
			<view class="flex b-b pb10 mt20">
				<view class="c6 mt10">真实姓名</view>
				<view class="ml50 flex1">
					<u--input v-model="manInfo.name" placeholder="请输入(必填)" />
				</view>
			</view>
			<view class="flex mt20 pb10 b-b">
				<view class="c6 mt10">本人电话</view>
				<view class="ml50 flex1 f-s-c">
					<u--input v-model="manInfo.phone" placeholder="请输入(必填)" />
				</view>
			</view>
			<view class="f24 c9 mt10">
				可与紧急联系人电话号码相同
			</view>
			<view class="flex b-b pb30 mt20" v-if="pageType=='球员'">
				<view class="c6 mt10">性别</view>
				<view class="flex1 mt10" style="margin-left: 110rpx;">
					<u-radio-group v-model="manInfo.sex">
						<u-radio :customStyle="{margin: '0 8px'}" label="男" name="男"></u-radio>
						<u-radio label="女" name="女"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="flex b-b pb30 mt20">
				<view class="c6 mt10">证件类型</view>
				<view class="ml60 f-s-c flex1 mt10">
					<text>身份证</text>
				</view>
				<!-- 先隐藏选择 后面再考虑
				 <view class="ml60 f-s-c flex1 mt10" @click="showSelect=!showSelect">
					<text>{{authName || '请选择'}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
			</view>
			<view class="flex b-b pb10 mt20">
				<view class="c6 mt10">证件号码</view>
				<view class="ml50 flex1">
					<u--input v-model="manInfo.card" placeholder="请输入(必填)" />
				</view>
			</view>
			<view class="flex b-b pb10 mt20" v-if="pageType=='球员'">
				<view class="c6 mt10">球衣号码</view>
				<view class="ml50 flex1">
					<u--input v-model="manInfo.playerNumber" placeholder="请输入(必填)" />
				</view>
			</view>
			<view class="flex b-b pb10 mt20">
				<view class="c6 mt10">参赛照片</view>
				<view class="ml50 flex1 flex" style="justify-content: space-between;">
					<uploadImg uploadText="" length="1" addUrl="/static/newYdsg/sf-upload.png" addWidth="220rpx"
						addHeight="280rpx" width="220rpx" height="280rpx"
						:filePaths="manInfo.logo ? [manInfo.logo] : []" @onValue="getTwo"></uploadImg>
					<view class="btn-primary-border bs10" @click="showUploadDemo=true"
						style="padding: 4rpx 8rpx;border: 1rpx solid #666;color: #666;height: 50rpx;">
						上传示范
					</view>
				</view>
			</view>
			<view class="flex b-b pb10 mt20">
				<view class="c6 mt10">服装尺寸</view>
				<view class="ml50 flex1">
					<u--input v-model="manInfo.size" :placeholder="pageType=='球员'?'请输入（必填）':'城市赛填0，总决赛填尺码'">
						<template slot="suffix">
							<u-button @tap="viewSizeTable" text="查看尺码表" type="primary" size="mini"></u-button>
						</template>
					</u--input>
				</view>
			</view>
			<view class="flex b-b pb10 mt20">
				<view class="c6 mt10">邮寄地址</view>
				<view class="ml50 flex1">
					<u--input v-model="manInfo.address" placeholder="请输入正确的邮寄地址" />
				</view>
			</view>
			<view class="flex mt20" v-if="pageType=='球员'">
				<view class="c6 mt10">参赛证明</view>
				<view class="ml50 flex1 flex" style="justify-content: space-between;">
					<!-- <uploadImg uploadText="" length="1" width="200rpx" height="200rpx"
						:filePaths="manInfo.competeProve ? [manInfo.competeProve] : []" @onValue="getThree"></uploadImg> -->
					<uploadImg uploadText="" length="3" width="180rpx" height="180rpx"
						:filePaths="manInfo.competeProve || []" @onValue="getThree"></uploadImg>
				</view>
			</view>
		</view>
		<view class="f24 p02 c9 mt10">
			个人证件、照片等个人隐私信息将仅用于本平台比赛相关事宜，会竭力保护您的个人隐私。
		</view>
		<view class="bf mt30 p3">
			<view class="wei pb30 b-b f-s-c" @click="selectPack">
				<text>附加礼包（非必选）</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view v-if="selectPackObjList.length">
				<view class="mt20 f-s-c" v-for="(item,index) in selectPackObjList" :key="index">
					<view class="f-y-c">
						<!-- mode="aspectFit" -->
						<img :src="'https://boyubasketball.oss-cn-shanghai.aliyuncs.com/'+item.logo"
							style="width: 200rpx;height: 200rpx;" />
						<view class="ml20"
							style="height: 140rpx;display: flex;flex-direction: column;justify-content: space-between;">
							<view>{{item.name}}</view>
							<view style="color: rgb(250, 140, 23);">¥{{item.amount}}</view>
						</view>
					</view>
					<view>
						<u-icon name="close" @click="delPack(index,item)"></u-icon>
					</view>
				</view>
			</view>
			<view class="mt20" v-else>
				<image src="/static/newYdsg/giftSize.png" mode="widthFix" style="width: 250rpx;"></image>
			</view>
		</view>
		<view class="bf mt30 p3">
			<view class="wei pb30 b-b">付款信息</view>
			<view class="f-s-c b-b pb30 mt20">
				<view class="c6 mt10">比赛费用</view>
				<view class="c0 mt10">¥{{pageType=='球员'?ExpensesObj.playerExpenses:ExpensesObj.coachExpenses}}</view>
			</view>
			<view class="f-s-c b-b pb30 mt20">
				<view class="c6 mt10">附加礼包</view>
				<view class="c0 mt10">¥{{packPrice}}</view>
			</view>
			<view class="f-s-c mt20">
				<view class="c6 mt10">合计</view>
				<view class="c0 mt10">¥{{manInfo.amount}}</view>
			</view>
		</view>
		<view class="bf mt30 p3 f-s-c">
			<view class="wei">付款方式</view>
			<view class="wei f-y-c">
				<image src="/static/newYdsg/wechatPay.png" style="width: 40rpx;" mode="widthFix"></image>
				<text class="ml10">微信支付</text>
			</view>
		</view>
		<view class="t-c m30 f-c">
			<!-- <u-checkbox :checked="checkList" shape="circle" label="我已阅读并同意">
			</u-checkbox> -->
			<u-checkbox-group v-model="checkList" placement="row">
				<u-checkbox label="我已阅读并同意" name="agree"></u-checkbox>
			</u-checkbox-group>
			<text class="cb" @click="goDetail">《免责及退费》</text>
		</view>

		<view class="foot-fixed-area f-x-ad cf" style="bottom: 50rpx;">
			<view class="w45 f-c bs10" :style="{background:checkList.length>0?'rgb(250, 140, 23)':'#FFC78C'}"
				style="height: 80rpx;" @click="sureJoin(1)">
				仅确认参赛
			</view>
			<view class="w45 f-c bs10" :style="{background:checkList.length>0?'rgb(15, 86, 185)':'#89B0E8'}"
				style="height: 80rpx;" @click="sureJoin(2)">
				确认参赛并支付
			</view>
		</view>

		<!-- <u-action-sheet cancelText="取消" @close="showSelect=false" @select="selectClick" :actions="listAuth"
			title="选择证件类型" :show="showSelect"></u-action-sheet> -->
		<u-action-sheet cancelText="取消" @close="showContact=false" @select="selectContactClick" :actions="listContact"
			title="选择紧急联系人" :show="showContact"></u-action-sheet>
		<!-- 上传示范 -->
		<u-popup closeable :show="showUploadDemo" @close="showUploadDemo=false">
			<view class="t-c p3">
				<view class="wei mb20">参赛照片上传示范</view>
				<view class="mt30 mb30">
					<image v-if="pageType=='教练'" style="width: 400rpx;" src="/static/newYdsg/uploadDemo-jiaolian.png"
						mode="widthFix"></image>
					<image v-else style="width: 400rpx;" src="/static/newYdsg/uploadDemo-xueyuan.png" mode="widthFix">
					</image>
				</view>
				<view class="c6 t-l">
					<view class="mb20">
						为保证您上传的照片符合参赛标准，请拍摄或从手机相册选择符合以下几点照片:
					</view>
					<view class="">
						1、照片背景蓝色、白色、红色均可
					</view>
					<view class="">
						2、请上传最近3个月内近照
					</view>
					<view class="">
						3、照片人物居中显示，取胸部以上最佳
					</view>
					<view class="">
						4、照片保证人物清晰
					</view>
				</view>
				<!-- <view class="o-y-s" style="max-height: 500rpx;">
					<view v-for="item in connectList" class="p20 b-b">
						<text>{{item.contestName}}</text>
					</view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	const $URL = require('../../request/request');
	const $index = require('../../request/api/v1/index');
	export default {
		data() {
			return {
				showContact: false,
				listContact: [{
					name: '妈妈',
					index: 0
				}, {
					name: '爸爸',
					index: 1
				}, {
					name: '其他',
					index: 2
				}],
				contactName: '',
				radiovalue1: 'man',
				checkList: [],
				showUploadDemo: false,
				manInfo: {},
				showSelect: false,
				listAuth: [{
					name: '身份证',
					index: 0
				}, {
					name: '港澳居民往来大陆通行证',
					index: 1
				}, {
					name: '台湾居民往来大陆通行证',
					index: 2
				}, {
					name: '护照',
					index: 3
				}],
				authName: '',
				pageType: '',
				ExpensesObj: '',
				contestId: '',
				packPrice: 0,
				selectPackObjList: [],
				teamballId: ''
			};
		},
		onShow() {
			console.log('this.manInfo', this.manInfo);
		},
		watch: {
			// packPrice(val) {
			// 	let numPrice = this.pageType == '球员' ? this.ExpensesObj.playerExpenses : this.ExpensesObj.coachExpenses
			// 	this.manInfo.amount = Number(numPrice) + Number(val)
			// }
		},
		onLoad(option) {
			// this.getFlow()
			this.teamballId = option.teamId
			console.log('pageType', option.pageType)
			this.pageType = option.pageType
			if (option.peopleParams) {
				this.manInfo = JSON.parse(option.peopleParams)
			}
			if (option.peopleId) {
				this.manInfo.id = option.peopleId // 球员或教练 id
			}
			let ExpensesObj = {
				playerExpenses: option.playerExpenses,
				coachExpenses: option.coachExpenses,
			}
			this.ExpensesObj = ExpensesObj
			// 费用
			this.manInfo.amount = option.pageType == '球员' ? ExpensesObj.playerExpenses : ExpensesObj.coachExpenses
			// 是否主教练 0是 1否
			this.manInfo.type = option.selectIndex == 0 ? 0 : 1
			this.contestId = this.manInfo.contestId = option.contestId
			let teamObj = JSON.parse(localStorage.getItem('teamObj'))
			// this.teamObj = teamObj
			this.manInfo.teamId = teamObj.id
			if (this.manInfo.competeProve) {
				console.log('哈哈')
				this.manInfo.competeProve = this.manInfo.competeProve.split(',')
			}
		},
		methods: {
			viewSizeTable() {
				let url = this.pageType == '球员' ?
					'https://boyubasketball.oss-cn-shanghai.aliyuncs.com/1754235996935faf78511-a82e-489f-a206-1a30ce3d1eff.png' :
					'https://boyubasketball.oss-cn-shanghai.aliyuncs.com/1754323947051log.png'
				uni.previewImage({
					urls: [
						url
					]
				});
			},
			selectPack() {
				uni.navigateTo({
					url: `/pages/business/selectPack?contestId=${this.contestId}&packIds=${this.manInfo.packId}`
				});
			},
			goDetail() {
				let ossCdn = 'https://boyubasketball.oss-cn-shanghai.aliyuncs.com/'
				let pageImg = new Map([
					['免责及退费', `${ossCdn}1754403773503mianze.png`],
					// ['免责及退费',
					// 	`${ossCdn}1751291388198notes.png,${ossCdn}1751291411329refundManagement.png,${ossCdn}1751291421545disclaimerAgreement.png`
					// ],
				])
				let imagePath = pageImg.get('免责及退费')
				uni.navigateTo({
					url: `/pages/index/detail?imgLik=${imagePath}`
				});
			},
			getFlow() {
				$index.getImage({
					show_position: 16,
					type: 0
				}).then(res => {
					this.Json = res;
					this.imageData = res.list;
				});
			},
			selectClick(obj) {
				console.log('obj', obj)
				this.authName = obj.name
				// this.manInfo.authIndex = index
			},
			selectContactClick(obj) {
				console.log('obj', obj)
				this.contactName = obj.name
				this.manInfo.emergencyStr = obj.name
			},
			getTwo(e) {
				console.log(e);
				this.manInfo.logo = e.detail[0]
			},
			getThree(e) {
				console.log(e);
				this.manInfo.competeProve = e.detail //[0]
			},
			delPack(index, item) {
				this.manInfo.amount = this.manInfo.amount - item.amount
				this.selectPackObjList.splice(index, 1)
				let newPrice = 0
				this.selectPackObjList.forEach(ss => {
					newPrice += ss.amount
				})
				this.packPrice = newPrice
				this.manInfo.packId = this.selectPackObjList.map(ss => ss.id).join(',')
			},
			sureJoin(type) {
				if (this.checkList.length == 0) {
					this.$u.toast('请阅读并勾选同意免责及退费协议')
					return
				}
				// if (this.selectPackObjList?.name) {
				if (!this.manInfo.size) {
					this.$u.toast('请输入服装尺码')
					return
				}
				if (!this.manInfo.address) {
					this.$u.toast('请输入邮寄地址')
					return
				}
				console.log('哈哈222')
				if (this.manInfo && this.manInfo.competeProve && this.manInfo.competeProve.length == 0 && this.pageType ==
					'球员') {
					this.$u.toast('请上传参赛证明')
					return
				}
				// }

				// type  1-仅参赛 2-参赛并支付
				// paymentStatus支付状态:1未支付，2已支付，3超时未支付，4超时后支付成功 5未支付关闭
				uni.showLoading({
					title: '请求中',
				});
				if (this.pageType == '教练') {
					$index.createCoach({
						...this.manInfo,
						...{
							payType: type == 1 ? 0 : 1,
							indexId: $URL.getBaseUrl() == 'http://bm.yundongshugen.com/api' ? 1 : 2,
							teamId: this.teamballId,
						}
					}).then(res => {
						if (res.code == 200) {
							if (type == 1) {
								this.$u.toast('参赛成功！')
								setTimeout(() => {
									// window.location.href = '/payment/success?orderId=' + this.orderId;
									uni.redirectTo({
										url: `/pages/business/matchDetail?contestId=${this.contestId}&teamId=${this.teamballId}`
									});
								}, 1500);
							} else {
								this.onGetSuccessParam(res)
							}
						}
					})
				}
				if (this.pageType == '球员') {
					$index.createPlayer({
						...this.manInfo,
						...{
							payType: type == 1 ? 0 : 1,
							indexId: $URL.getBaseUrl() == 'http://bm.yundongshugen.com/api' ? 1 : 2,
							teamId: this.teamballId,
						},
						...{
							competeProve: this.manInfo.competeProve.join(',')
						}
					}).then(res => {
						if (res.code == 200) {
							if (type == 1) {
								this.$u.toast('参赛成功！')
								setTimeout(() => {
									// window.location.href = '/payment/success?orderId=' + this.orderId;
									uni.redirectTo({
										url: `/pages/business/matchDetail?contestId=${this.contestId}&teamId=${this.teamballId}`
									});
								}, 1500);
							} else {
								this.onGetSuccessParam(res)
							}
						}
					})
				}
			},
			onGetSuccessParam(res) {
				if (!res.data && res.code == 200) {
					// 金额为0 不需要进入支付 直接成功即可
					this.$u.toast('操作成功！')
					setTimeout(() => {
						// window.location.href = '/payment/success?orderId=' + this.orderId;
						uni.redirectTo({
							url: `/pages/business/matchDetail?contestId=${this.contestId}&teamId=${this.teamballId}`
						});
					}, 1500);
					return
				}
				const payParams = res.data;
				console.log('获取支付参数成功', payParams);
				// 调用微信支付
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(
								payParams),
							false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(
							payParams));
						document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(
							payParams));
					}
				} else {
					this.onBridgeReady(payParams);
				}
			},
			onBridgeReady(payParams) {
				uni.hideLoading()
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: payParams.appId,
						timeStamp: payParams.timeStamp,
						nonceStr: payParams.nonceStr,
						package: payParams.packageValue,
						signType: payParams.signType,
						paySign: payParams.paySign
					},
					(res) => {
						console.log('res支付回调', res);
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							this.$u.toast('支付成功！')
							setTimeout(() => {
								// window.location.href = '/payment/success?orderId=' + this.orderId;
								uni.redirectTo({
									url: `/pages/business/matchDetail?contestId=${this.contestId}&teamId=${this.teamballId}`
								});
							}, 1500);
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							// this.$message.info('用户取消支付');
							console.log('用户取消支付');
						} else {
							console.log(`支付失败: ${res.err_msg}`);
							// this.$message.error(`支付失败: ${res.err_msg}`);
						}
					}
				);
			}
		}
	};
</script>